<template>
  <div>
    <van-nav-bar title="我的订单" left-arrow @click-left="backSup"></van-nav-bar>
    <van-tabs
      class="order-tab"
      v-model="active"
      title-active-color="FBA86"
      color="#FBA86"
      @click="changeStatus"
    >
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="待评价"></van-tab>

      <div v-for="item in orderList" :key="item.order_id">
        <div class="order-header">
          <p>创建时间：{{item.time}}</p>
          <span v-if="item.order_state==1">待付款</span>
          <span v-else-if="item.order_state==2">待发货</span>
          <span v-else-if="item.order_state==3">待收货</span>
          <span v-else-if="item.order_state==4">待评价</span>
          <span v-else-if="item.order_state==5">已取消</span>
          <span v-else-if="item.order_state==6">已完成</span>
        </div>
        <div
          class="cart-goods-item"
          v-for="(good,index) in item.goods"
          :key="index"
        >
          <div class="pd-images">
            <img :src="good.goods_cover" alt />
          </div>
          <div class="pd-info">
            <div class="pd-title">{{good.goods_name}}</div>
            <div class="pd-sku">
              <p class="sku-info">{{good.goods_attr}}</p>
            </div>
            <div class="pd-price">
              <div class="total">
                <span>&yen;</span>
                {{good.goods_price}}
              </div>
              <span class="num">×{{good.goods_num}}</span>
            </div>
          </div>
        </div>
        <div class="order-bottom">
          <p>共{{item.total_num}}件商品 合计 ¥{{item.total_price}}</p>
          <ul class="order-btn">
            <li v-if="item.order_state == 1" @click="payment(item.order_id)">去付款</li>
            <li v-if="item.order_state == 1" @click="cancelConfirm(item.order_id)">取消订单</li>
            <li v-if="item.order_state == 3" @click="receipt(item.order_id)">确认收货</li>
            <li
              v-if="item.order_state == 3||item.order_state == 4||item.order_state == 6"
              @click="toLogistics(item.order_id)"
            >查看物流</li>
            <li v-if="item.order_state == 4" @click="toPublish(item.order_id)">评价</li>
            <li v-if="item.order_state >=5" @click="deleteConfirm(item.order_id)">删除</li>
          </ul>
        </div>
      </div>
      <div v-if="orderList.length==0" class="none">
        <img src="../../assets/imgList/none.jpg" />
        <p>这里什么也没有</p>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { Cell, Row, Col, List, Card, Tabs, Tab, Toast, Tag } from "vant";
import api from "@/utils/api";
export default {
  components: {
    [Cell.name]: Cell,
    [Row.name]: Row,
    [Col.name]: Col,
    [List.name]: List,
    [Card.name]: Card,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Toast.name]: Toast,
    [Tag.name]: Tag
  },
  data() {
    return {
      active: 0,
      orderList: []
    };
  },
  created() {
    console.log(this.$route.params.state);
    this.active =
      this.$route.params.state || sessionStorage.getItem("state") || "0";
  },
  mounted() {
    this.weixinConfig();
    this.initGetOrder();
  },
  methods: {
    initGetOrder() {
      sessionStorage.setItem("state", this.active);
      this.getOrder(this.active);
    },
    changeStatus(index, title) {
      this.initGetOrder();
    },
    // 获取全部订单
    getOrder(order_state) {
      this.$axios({
        method: "get",
        url: api.orderlist,
        params: {
          token: localStorage.getItem("token"),
          order_state: order_state
        }
      }).then(res => {
        console.log(res);
        this.orderList = res;
      });
    },
    payment(order_id) {
      this.$axios({
        method: "POST",
        url: api.payment,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: order_id
        })
      }).then(res => {
        console.log(res);
        this.wxPay(res);
      });
    },
    weixinConfig() {
      this.$axios(api.wxconfig, {
        params: {
          url: encodeURIComponent(location.href.split("#")[0])
        }
      }).then(data => {
        console.log(data);
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: [
            "chooseWXPay",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
          ]
        });
      });
    },
    wxPay(data) {
      wx.ready(() => {
        wx.chooseWXPay({
          appId: data.appId,
          timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: res => {
            Toast("支付成功");
            this.initGetOrder();
          },
          cancel: res => {
            Toast("取消支付");
          },
          fail: res => {
            Toast("支付失败");
          }
        });
      });
    },
    cancelConfirm(order_id) {
      this.$dialog
        .confirm({
          title: "取消订单",
          message: "您确定取消订单吗？",
          closeOnClickOverlay: true
        })
        .then(() => {
          this.cancel(order_id);
        })
        .catch(() => {});
    },
    cancel(order_id) {
      this.$axios({
        method: "POST",
        url: api.cancel,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: order_id
        })
      }).then(res => {
        console.log(res);
        this.initGetOrder();
      });
    },
    deleteConfirm(order_id) {
      this.$dialog
        .confirm({
          title: "删除订单",
          message: "您确定要删除此订单吗？",
          closeOnClickOverlay: true
        })
        .then(() => {
          this.deleteOrder(order_id);
        })
        .catch(() => {});
    },
    deleteOrder(order_id) {
      this.$axios({
        method: "POST",
        url: api.delete,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: order_id
        })
      }).then(res => {
        console.log(res);
        this.initGetOrder();
      });
    },
    receipt(order_id) {
      this.$axios({
        method: "post",
        url: api.receipt,
        data: this.$qs.stringify({
          order_id: order_id,
          token: localStorage.getItem("token")
        })
      }).then(res => {
        console.log(res);
        this.initGetOrder();
      });
    },
    backSup() {
      this.$router.go(-1);
    },
    toOrderDetail(order_id) {
      this.$router.push({
        name: "orderdetail",
        query: { order_id: order_id }
      });
    },
    toLogistics(order_id, shipNumber, com) {
      this.$router.push({
        name: "logistics",
        query: { order_id: order_id }
      });
    },
    toPublish(order_id) {
      this.$router.push({ name: "publish", query: { order_id: order_id } });
    }
  }
};
</script>

<style lang="less" scoped>
@import "~style/common.less";
.order-header {
  display: flex;
  padding: 15px;
  padding-bottom: 0;
  background-color: #fff;
  border-top: 1px solid #eee;
  justify-content: space-between;
  .font-dpr(12px);
  span {
    color: @priColor;
  }
}
.order-bottom {
  padding: 15px;
  background-color: #fff;
  text-align: right;
  .font-dpr(12px);
  .order-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    height: 44px;
    li {
      .font-dpr(12px);
      // border:1Px solid @priColor;
      line-height: 24px;
      height: 24px;
      border-radius: 12px;
      padding: 0 8px;
      margin-left: 10px;
      color: @tipColor;
      &:nth-child(1) {
        color: @priColor;
        border: 1px solid @priColor;
      }
      &:nth-child(2) {
        // color: @tipColor;
        border: 1px solid @tipColor;
      }
    }
  }
}
.cart-goods-item {
  background-color: #fff;
  // margin-top: 10px;
  // width: 90vw;
  padding: 10px 15px;
  // border: 1px solid #f9f;
  .flexbox(flex-start, center, row, nowrap);
  justify-content: space-between;
  // padding: 5px;
  // border-bottom: 1px solid @borderColor;
  &:last-child {
    border-bottom: none;
  }
  .order-info {
    border: 1px solid red;
    position: relative;
    margin-top: 10px;
    padding: 17px 25px;
    color: @fontColorH3;
    .font-dpr(14px);
    font-weight: normal;
    background-color: #fff;
    &::after {
      position: absolute;
      content: "";
      display: block;
      width: 3px;
      height: 14px;
      left: 15px;
      top: 21px;
      background-color: @priColor;
    }
    p {
      .font-dpr(12px);
      color: @fontColorP;
      font-weight: 300;
      margin-top: 12px;
    }
  }

  .pd-images {
    border: 1px solid @borderColor;
    // border: 1px solid #f0f;

    margin: 0 15px 0 5px;
    flex: 1;
    // max-width: 100px;
    img {
      width: 75px;
      height: 75px;
    }
  }
  .pd-info {
    flex: 3;
    // .flexbox(flex-start, space-between, column, wrap);
    -width: 68% !important;
    // flex: initial;
    // border: 1px solid blue;

    .pd-title {
      position: relative;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
      -webkit-line-clamp: 2;

      max-width: 100%;
      .font-dpr(12px);
      color: @fontColorH3;
    }
    .pd-sku {
      padding: 5px 0;
      line-height: 1.5;
      .font-dpr(11px);
      color: @tipColor;
    }
    .pd-price {
      margin-top: 10px;
      .total {
        .font-dpr(14px);
        color: @secColor;
      }
      .flexbox(space-between, center, row, nowrap);
      flex: initial;

      /deep/ .van-stepper {
        // z-index: 999;
        .flexbox(space-between, center, row, nowrap);
        flex: initial;
        border-radius: 2px;
        // border: 1px solid #f0f;
        max-height: 16px;
        width: 2rem;
        .van-stepper__minus,
        .van-stepper__plus {
          border: none;
          max-height: 16px;
          background-color: @bgColor;
        }
        .van-stepper__input {
          border: 1px solid @borderColor;
          // border: 1px solid #f00;
          max-height: 16px;
          background-color: @bgColor;
          // border: none;
          outline: none;
          text-align: center;
          padding: 0;
          min-width: 40%;
          .font-dpr(11px);
        }
        .van-stepper__minus--disabled {
          background-color: @bgColor;
        }
      }
    }
    .num {
      .font-dpr(12px);
    }
  }
}
.none {
  height: calc(100vh - 90px);
  box-sizing: border-box;
  padding-top: 100px;
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
  p {
    margin-top: 20px;
    padding: 15px 0;
    font-size: 16px;
    color: #999;
  }
}
</style>

